import React, { useState } from "react";
import ReactDOM from "react-dom/client";

// class App extends React.Component {
//   state = {
//     count: 0,
//   };

//   addCount = () => {
//     this.setState((prevState) => {
//       return {
//         count: prevState.count + 1,
//       };
//     });
//   };

//   render() {
//     return (
//       <div>
//         <h1>App</h1>
//         <p>count：{this.state.count}</p>

//         <button onClick={this.addCount}>count++</button>
//       </div>
//     );
//   }
// }

// function fn1() {
//   const [a, b] = useState("111");
// }

function App() {
  console.log("App");
  // 函数组件中要使用state，得用 useState 这个内置的 hook 函数
  // useState(initalValue) => [x, y]
  //    x = 数据
  //    y = 修改数据的函数
  //        y(数据)
  //        y((旧数据) => 数据)
  const [count, setCount] = useState(0);
  const [name, setName] = useState("张三");

  function addCount() {
    console.log("addCount");

    setCount(count + 1);
    // setCount((prevCount) => {
    //   console.log("prevCount", prevCount);
    //   return prevCount + 1;
    // });
    // setCount((prevCount) => prevCount + 1); // 简写

    // 上面修改数据之后，直接使用的话，是拿不到最新的数据, 且没有 setState 的第二个参数的玩法
    console.log(count);
  }

  function changeName() {
    // setName("李四");
    setName(() => "李四");
  }

  return (
    <div>
      <h1>App</h1>
      <p>count：{count}</p>
      <p>name: {name}</p>

      {/* <button onClick={addCount}>count++</button> */}
      <button
        onClick={() => {
          // setCount((count) => count + 1);

          // 下面五行代码，执行之后，页面渲染为 1
          // setCount(count + 1);
          // setCount(count + 1);
          // setCount(count + 1);
          // setCount(count + 1);
          // setCount(count + 1);

          // 下面五行代码，执行之后，页面渲染为 5
          setCount((prevCount) => prevCount + 1);
          setCount((prevCount) => prevCount + 1);
          setCount((prevCount) => prevCount + 1);
          setCount((prevCount) => prevCount + 1);
          setCount((prevCount) => prevCount + 1);
        }}
      >
        count++
      </button>
      <button onClick={changeName}>name 修改为 李四</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
